JavaScript moduļu federācijas spraudņu arhitektūra: dinamiskas spraudņu sistēmas izveide

Mūsdienu sarežģītajā tīmekļa izstrādes vidē ir būtiski veidot modulāras, mērogojamas un uzturējamas lietojumprogrammas. Viena spēcīga tehnika, kā to panākt, ir spraudņu arhitektūra, kur funkcionalitāte tiek sadalīta neatkarīgos, dinamiski ielādējamos moduļos. JavaScript moduļu federācija, Webpack 5 funkcija, nodrošina robustu mehānismu šādu arhitektūru ieviešanai. Šajā rakstā aplūkotas nianses, kā izmantot moduļu federāciju, lai izveidotu dinamisku spraudņu sistēmu.

Kas ir moduļu federācija?

Moduļu federācija ļauj JavaScript lietojumprogrammām dinamiski koplietot kodu izpildes laikā. Tas nozīmē, ka modulis (koda daļa) no vienas lietojumprogrammas var tikt tieši izmantots citā lietojumprogrammā, bez nepieciešamības to pārbūvēt vai atkārtoti izvietot. To panāk, eksponējot un patērējot moduļus dažādās būvēšanas versijās un pat dažādās izvietošanas reizēs.

Tradicionālās koda koplietošanas metodes, piemēram, npm pakotnes, prasa patērējošo lietojumprogrammu pārbūvi un atkārtotu izvietošanu ikreiz, kad tiek atjaunināta koplietotā atkarība. Moduļu federācija novērš šo apgrūtinājumu, padarot to ideāli piemērotu scenārijiem, kur nepieciešami bieži atjauninājumi un neatkarīgas izvietošanas.

Kāpēc izmantot moduļu federāciju spraudņu arhitektūrām?

Moduļu federācija piedāvā vairākas priekšrocības, veidojot spraudņu arhitektūras:

• Dinamiska moduļu ielāde: Spraudņus var ielādēt un izlādēt izpildes laikā, ļaujot lietojumprogrammām pielāgoties mainīgām prasībām, neprasot pilnīgu atkārtotu izvietošanu.
• Atsaiste: Spraudņi tiek izstrādāti un izvietoti neatkarīgi, samazinot atkarības starp dažādām lietojumprogrammas daļām.
• Mērogojamība: Lietojumprogrammu var viegli paplašināt ar jauniem spraudņiem, neietekmējot esošo funkcionalitāti.
• Uzturējamība: Spraudņus var atjaunināt un uzturēt neatkarīgi, samazinot risku ieviest kļūdas pamatlietojumprogrammā.
• Koda atkārtota izmantošana: Spraudņus var atkārtoti izmantot vairākās lietojumprogrammās, veicinot konsekvenci un samazinot izstrādes pūles.
• Versiju pārvaldība un atritināšana: Jūs varat pārvaldīt dažādas spraudņu versijas un nepieciešamības gadījumā viegli atgriezties pie iepriekšējām versijām.

Pamatjēdzieni: resursdatora un attālinātais konteiners

Moduļu federācija balstās uz diviem galvenajiem jēdzieniem:

• Resursdatora konteiners: Galvenā lietojumprogramma, kas patērē attālinātos moduļus (spraudņus).
• Attālinātais konteiners: Lietojumprogramma, kas eksponē moduļus (spraudņus), lai tos patērētu resursdators.

Resursdatora konteiners dinamiski ielādē attālinātā ieejas failu no attālinātā konteinera, kurā ir eksponēto moduļu manifests. Pēc tam resursdators var piekļūt un izmantot šos moduļus tā, it kā tie būtu daļa no tā paša koda bāzes.

Dinamiskas spraudņu sistēmas ieviešana ar moduļu federāciju: soli pa solim ceļvedis

Apskatīsim vienkāršas spraudņu sistēmas izveides procesu, izmantojot moduļu federāciju. Mēs izveidosim resursdatora lietojumprogrammu un attālinātu spraudņa lietojumprogrammu.

1. Resursdatora lietojumprogrammas iestatīšana (resursdatora konteiners)

Vispirms izveidojiet jaunu projekta direktoriju un inicializējiet jaunu npm projektu:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

Instalējiet Webpack un tā atkarības:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Izveidojiet `webpack.config.js` failu `host-app` direktorijā ar šādu konfigurāciju:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3000,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Host',
      remotes: {
        'plugin': 'Plugin@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Paskaidrojums:

• `name`: Resursdatora lietojumprogrammas nosaukums.
• `remotes`: Definē attālinātos konteinerus, kurus resursdators patērēs. Šajā gadījumā tas patērē attālināto konteineru ar nosaukumu `plugin` no `http://localhost:3001/remoteEntry.js`. `Plugin@` sintakse nozīmē, ka attālinātā konteinera ModuleFederationPlugin `name` ir 'Plugin'.
• `shared`: Uzskaita atkarības, kas tiek koplietotas starp resursdatora un attālinātajiem konteineriem. Tas novērš šo atkarību dublētu kopiju ielādi. `shared` izmantošana ir kritiski svarīga, lai izvairītos no kļūdām un nodrošinātu pareizu spraudņa funkcionalitāti.

Izveidojiet `src` direktoriju un pievienojiet `index.js` failu ar šādu saturu:

            import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';

const PluginComponent = React.lazy(() => import('plugin/PluginComponent'));

const App = () => {
  return (
    <div>
      <h1>Host Application</h1>
      <Suspense fallback={<div>Loading Plugin...</div>}>
        <PluginComponent />
      </Suspense>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

            

              
                Copy
              
            
          

Paskaidrojums:

• Mēs izmantojam `React.lazy`, lai dinamiski importētu `PluginComponent` no `plugin` attālinātā konteinera. Tas ir būtiski, lai nodrošinātu spraudņa slinko ielādi (lazy loading) un izvairītos no sākotnējās ielādes aizkavēšanās.
• `Suspense` komponents tiek izmantots, lai apstrādātu ielādes stāvokli, kamēr spraudnis tiek ielādēts.

Izveidojiet `public` direktoriju un pievienojiet `index.html` failu ar šādu saturu:

            <!DOCTYPE html>
<html>
<head>
  <title>Host Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Pievienojiet Babel konfigurācijas failu `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Atjauniniet savu `package.json` ar starta skriptu:

            {
  "name": "host-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

2. Attālinātās lietojumprogrammas iestatīšana (spraudņa konteiners)

Izveidojiet jaunu projekta direktoriju spraudnim:

            mkdir plugin-app
cd plugin-app
npm init -y
            

              
                Copy
              
            
          

Instalējiet Webpack un tā atkarības:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Izveidojiet `webpack.config.js` failu `plugin-app` direktorijā ar šādu konfigurāciju:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3001,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Plugin',
      filename: 'remoteEntry.js',
      exposes: {
        './PluginComponent': './src/PluginComponent',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Paskaidrojums:

• `name`: Attālinātā konteinera (spraudņa) nosaukums. Tam **obligāti** jāsakrīt ar nosaukumu, kas izmantots resursdatora `remotes` konfigurācijā.
• `filename`: Attālinātā ieejas faila nosaukums, kuru resursdators ielādēs.
• `exposes`: Definē moduļus, kurus eksponē attālinātais konteiners. Šajā gadījumā mēs eksponējam `PluginComponent` moduli. Atslēga './PluginComponent' tiek izmantota resursdatora importa priekšrakstā (piem., `import('plugin/PluginComponent')`).
• `shared`: Tāpat kā resursdatorā, uzskaita koplietotās atkarības. Ir vitāli svarīgi, lai koplietotās atkarības un to versijas būtu saderīgas starp resursdatoru un attālināto konteineru.

Izveidojiet `src` direktoriju un pievienojiet `PluginComponent.jsx` failu ar šādu saturu:

            import React from 'react';

const PluginComponent = () => {
  return (
    <div style={{border: '1px solid blue', padding: '10px'}}>
      <h2>Plugin Component</h2>
      <p>This is a dynamically loaded plugin!</p>
    </div>
  );
};

export default PluginComponent;

            

              
                Copy
              
            
          

Izveidojiet `index.js` failu `src` direktorijā, lai eksportētu PluginComponent:

            import PluginComponent from './PluginComponent';

export default PluginComponent;
            

              
                Copy
              
            
          

Izveidojiet `public` direktoriju un pievienojiet `index.html` failu ar šādu saturu:

            <!DOCTYPE html>
<html>
<head>
  <title>Plugin Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Pievienojiet Babel konfigurācijas failu `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Atjauniniet savu `package.json` ar starta skriptu:

            {
  "name": "plugin-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

3. Lietojumprogrammu palaišana

Palaidiet gan resursdatora, gan spraudņa lietojumprogrammas, izpildot `npm start` to attiecīgajās direktorijās.

Pārlūkprogrammā atveriet `http://localhost:3000`. Jums vajadzētu redzēt resursdatora lietojumprogrammu ar dinamiski ielādētu spraudņa komponentu.

Papildu funkcijas un apsvērumi

Versiju pārvaldība un atritināšana

Moduļu federācija atbalsta versiju pārvaldību, ļaujot jums pārvaldīt dažādas spraudņu versijas. Jūs varat norādīt versiju ierobežojumus resursdatora `remotes` konfigurācijā. Piemēram:

            remotes: {
  'plugin': 'Plugin@http://localhost:3001/remoteEntry.js@1.0.0',
}
            

              
                Copy
              
            
          

Tas norāda resursdatoram izmantot spraudņa versiju 1.0.0. Ja ir pieejama jaunāka versija, resursdators turpinās izmantot norādīto versiju, līdz tā tiks skaidri atjaunināta. Robustas versiju pārvaldības ieviešana ir būtiska, lai novērstu kritiskas izmaiņas un nodrošinātu lietojumprogrammas stabilitāti.

Drošības apsvērumi

Izmantojot moduļu federāciju, drošība ir vissvarīgākā. Apsveriet sekojošo:

• Autentifikācija un autorizācija: Ieviesiet pienācīgus autentifikācijas un autorizācijas mehānismus, lai nodrošinātu, ka tikai autorizēti lietotāji var piekļūt un izmantot spraudņus.
• Koda integritāte: Pārbaudiet attālināto moduļu integritāti, lai novērstu ļaunprātīga koda ievadīšanu lietojumprogrammā. Apsveriet satura drošības politikas (Content Security Policy - CSP) izmantošanu, lai ierobežotu avotus, no kuriem lietojumprogramma var ielādēt resursus.
• Atkarību pārvaldība: Rūpīgi pārvaldiet gan resursdatora, gan attālināto konteineru atkarības, lai izvairītos no ievainojamībām. Regulāri atjauniniet atkarības uz jaunākajām versijām.
• Ievades validācija: Validējiet visus datus, kas saņemti no attālinātajiem moduļiem, lai novērstu injekcijas uzbrukumus.
• CORS (Cross-Origin Resource Sharing): Pareizi konfigurējiet CORS, lai ļautu resursdatora lietojumprogrammai piekļūt attālinātajam ieejas failam no spraudņa lietojumprogrammas.

Spraudņu atklāšana un pārvaldība

Sarežģītākām spraudņu sistēmām jums var būt nepieciešams mehānisms spraudņu atklāšanai un pārvaldībai. To var panākt, izmantojot spraudņu reģistru vai atklāšanas pakalpojumu. Centrālais reģistrs var uzglabāt informāciju par pieejamajiem spraudņiem, tostarp to atrašanās vietu, versiju un atkarības. Pēc tam resursdatora lietojumprogramma var vaicāt reģistram, lai atrastu un ielādētu atbilstošos spraudņus.

Apsveriet šīs pieejas:

• Centralizēta konfigurācija: Uzglabājiet spraudņu URL centrālā konfigurācijas failā (piem., JSON failā), kuru resursdatora lietojumprogramma lasa izpildes laikā. Tas ļauj viegli pievienot, noņemt vai atjaunināt spraudņus, neizvietojot atkārtoti resursdatora lietojumprogrammu.
• API balstīta atklāšana: Izveidojiet API galapunktu, kas atgriež pieejamo spraudņu sarakstu. Pēc tam resursdatora lietojumprogramma var ielādēt šo sarakstu un dinamiski ielādēt spraudņus.
• Uz notikumiem balstīta arhitektūra: Izmantojiet notikumu kopni (event bus) vai ziņojumu rindu, lai paziņotu resursdatora lietojumprogrammai, kad ir pieejami jauni spraudņi. Tas ļauj asinhroni atklāt un ielādēt spraudņus.

Dinamiska konfigurācija un spraudņu aktivizēšana

Ļaut lietotājiem dinamiski konfigurēt un aktivizēt spraudņus ir spēcīga funkcija. Tas prasa mehānismu spraudņu konfigurāciju glabāšanai un pārvaldībai. Jūs varat izmantot datu bāzi, konfigurācijas failu vai mākoņpakalpojumu konfigurācijas pakalpojumu, lai glabātu spraudņu iestatījumus. Pēc tam resursdatora lietojumprogramma var nolasīt šos iestatījumus izpildes laikā un attiecīgi aktivizēt spraudņus. Apsveriet iespēju nodrošināt lietotāja saskarni spraudņu konfigurāciju pārvaldībai.

Asinhrono operāciju un kļūdu apstrāde

Strādājot ar dinamiski ielādētiem spraudņiem, ir būtiski graciozi apstrādāt asinhronās operācijas un kļūdas. Izmantojiet `async/await` vai Promises, lai pārvaldītu asinhrono kodu. Ieviesiet pareizu kļūdu apstrādi, lai notvertu un reģistrētu visas kļūdas, kas rodas spraudņa ielādes vai izpildes laikā. Sniedziet lietotājam informatīvus kļūdu ziņojumus. Apsveriet centralizēta kļūdu reģistrēšanas pakalpojuma izmantošanu, lai izsekotu kļūdas visos spraudņos.

Koda sadalīšana un veiktspējas optimizācija

Lai optimizētu veiktspēju, izmantojiet koda sadalīšanu (code splitting), lai sadalītu lietojumprogrammu un spraudņus mazākos gabalos. Tas ļauj pārlūkprogrammai lejupielādēt tikai to kodu, kas nepieciešams konkrētai lapai vai funkcijai. Webpack nodrošina iebūvētu atbalstu koda sadalīšanai. Apsveriet slinko ielādi (lazy loading), lai ielādētu spraudņus tikai tad, kad tie ir nepieciešami. Minimizējiet un saspiediet kodu, lai samazinātu faila izmēru.

Testēšana un nepārtrauktā integrācija

Rūpīgi pārbaudiet savu spraudņu sistēmu, lai nodrošinātu, ka tā darbojas pareizi. Rakstiet vienībtestus, integrācijas testus un end-to-end testus. Izmantojiet nepārtrauktās integrācijas (CI) sistēmu, lai automātiski palaistu testus ikreiz, kad tiek mainīts kods. Ieviesiet nepārtrauktās piegādes (CD) konveijeru, lai automatizētu lietojumprogrammas un spraudņu izvietošanu.

Reālās pasaules piemēri un lietošanas gadījumi

Moduļu federācija tiek izmantota dažādās reālās pasaules lietojumprogrammās, tostarp:

• E-komercijas platformas: Dinamiski ielādē produktu ieteikumus, maksājumu vārtejas un piegādes pakalpojumu sniedzējus. Piemēram, globāla e-komercijas platforma varētu izmantot moduļu federāciju, lai integrētu dažādus maksājumu nodrošinātājus atkarībā no klienta atrašanās vietas. Ziemeļamerikā tā varētu ielādēt spraudni Stripe, bet Eiropā — spraudni PayPal vai Klarna.
• Satura pārvaldības sistēmas (CMS): Ļauj lietotājiem instalēt un aktivizēt spraudņus, lai paplašinātu CMS funkcionalitāti. CMS varētu ļaut lietotājiem instalēt spraudņus SEO optimizācijai, sociālo mediju integrācijai vai satura analīzei.
• Informācijas paneļi un analītikas platformas: Dinamiski ielādē dažādus logrīkus un vizualizācijas. Globāla analītikas platforma varētu ielādēt spraudņus dažādiem datu avotiem, piemēram, Google Analytics, Adobe Analytics vai Salesforce.
• Mikrofrontendu arhitektūras: Veido liela mēroga tīmekļa lietojumprogrammas kā neatkarīgi izvietojamu mikrofrontendu kolekciju. Liels uzņēmums varētu izmantot moduļu federāciju, lai veidotu savu tīmekļa lietojumprogrammu kā mikrofrontendu kolekciju, kur katrs ir atbildīgs par konkrētu biznesa funkciju, piemēram, kontu pārvaldību, produktu katalogu vai pasūtījumu apstrādi.
• Dizaina sistēmas: Koplieto lietotāja saskarnes komponentus un dizaina marķierus (tokens) starp vairākām lietojumprogrammām. Globāla organizācija ar vairākiem zīmoliem varētu izmantot moduļu federāciju, lai koplietotu kopīgu dizaina sistēmu visās savās lietojumprogrammās, nodrošinot konsekvenci un samazinot izstrādes pūles.

Labākā prakse, veidojot dinamiskas spraudņu sistēmas ar moduļu federāciju

Šeit ir dažas labākās prakses, kas jāpatur prātā, veidojot dinamiskas spraudņu sistēmas ar moduļu federāciju:

• Veidojiet spraudņus mazus un fokusētus: Katram spraudnim jābūt atbildīgam par konkrētu funkcionalitātes daļu. Tas atvieglo spraudņu uzturēšanu un atjaunināšanu.
• Definējiet skaidras spraudņu saskarnes: Definējiet skaidras saskarnes tam, kā spraudņi mijiedarbojas ar resursdatora lietojumprogrammu. Tas nodrošina, ka spraudņi ir saderīgi ar resursdatoru un novērš kritiskas izmaiņas.
• Izmantojiet semantisko versiju pārvaldību: Izmantojiet semantisko versiju pārvaldību, lai pārvaldītu savu spraudņu versijas. Tas atvieglo izmaiņu izsekošanu un nodrošina saderību.
• Nodrošiniet dokumentāciju: Nodrošiniet skaidru un kodolīgu dokumentāciju saviem spraudņiem. Tas palīdz lietotājiem saprast, kā instalēt, konfigurēt un lietot spraudņus.
• Ieviesiet drošības labākās prakses: Ievērojiet drošības labākās prakses, lai aizsargātu savu lietojumprogrammu un spraudņus no ievainojamībām.
• Pārraugiet spraudņu veiktspēju: Pārraugiet savu spraudņu veiktspēju, lai identificētu jebkādus vājos punktus. Optimizējiet kodu, lai uzlabotu veiktspēju.
• Automatizējiet izvietošanu: Automatizējiet savas lietojumprogrammas un spraudņu izvietošanu. Tas samazina kļūdu risku un nodrošina, ka atjauninājumi tiek ātri izvietoti.
• Izmantojiet konsekventu kodēšanas stilu: Ieviesiet konsekventu kodēšanas stilu visos spraudņos. Tas padara kodu vieglāk lasāmu un uzturamu.
• Rakstiet vienībtestus: Rakstiet vienībtestus saviem spraudņiem, lai nodrošinātu, ka tie darbojas pareizi.
• Izmantojiet linteri: Izmantojiet linteri, lai automātiski pārbaudītu jūsu kodu uz kļūdām.

Noslēgums

JavaScript moduļu federācija nodrošina spēcīgu un elastīgu mehānismu dinamisku spraudņu sistēmu veidošanai. Izmantojot moduļu federāciju, jūs varat izveidot modulāras, mērogojamas un uzturējamas lietojumprogrammas, kas spēj pielāgoties mainīgajām prasībām. Ievērojot šajā rakstā izklāstītās labākās prakses, jūs varat izveidot robustas un drošas spraudņu sistēmas, kas atbilst jūsu organizācijas vajadzībām.

Šī tehnoloģija ir īpaši vērtīga starptautiskā kontekstā, ļaujot uzņēmumiem pielāgot savu programmatūras piedāvājumu konkrētiem reģioniem vai klientu segmentiem, neizvietojot pilnīgi atsevišķas lietojumprogrammas. No vietējo maksājumu vārteju integrēšanas līdz reģionam specifiska satura piegādei, moduļu federācija veicina personalizētāku un efektīvāku lietotāja pieredzi visā pasaulē.